<template>
	<view class="authentication">
		<!-- 师傅 认证 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">师傅认证</text>
			</view>
		</u-navbar>
		<!-- 未提交 -->
		<view
			class="authentication-container w-750 b-box d-flex flex-c just-sw ali-i-c  bg-fa po-re"
			:style="{ height: containerHeight }"
			v-if="!userinfo"
		>
			<view>
				<!-- 表单 -->
				<view class="w-750 bg-ff b-box p-x-32" style="margin-bottom: 22rpx;padding-top: 32rpx;">
					<view
						class="d-flex flex-r ali-i-c just-c b-box"
						style="border-bottom: 2rpx solid #EEEEEE;padding: 34rpx 0;"
					>
						<text
							class="pf-sc fw-400"
							style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 48rpx;"
						>
							师傅姓名
						</text>
						<u-input
							border="none"
							placeholder="请输入您的姓名"
							:customStyle="{ color: 'rgba(0,0,0,0.9000)', font: '400 30rpx PingFang SC' }"
							placeholderStyle="color:#999999;fontWeight:400;fontsize:30px;fontfamily:PingFang SC-Regular, PingFang SC"
							v-model="requetParams.userName"
						></u-input>
					</view>
					<view class="d-flex flex-r ali-i-c just-c b-box" style="padding: 34rpx 0;">
						<text
							class="pf-sc fw-400"
							style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 78rpx;"
						>
							手机号
						</text>
						<u-input
							type="number"
							border="none"
							placeholder="请输入手机号"
							placeholderStyle="color:#999999;fontWeight:400;fontsize:30px;fontfamily:PingFang SC-Regular, PingFang SC"
							:customStyle="{ color: 'rgba(0,0,0,0.9000)', font: '400 30rpx PingFang SC' }"
							v-model="requetParams.userMobile"
						></u-input>
					</view>
				</view>
				<!-- 上传 -->
				<view class="w-750 bg-ff b-box p-x-32" style="padding-top: 32rpx; margin-bottom:60rpx">
					<view
						class="d-flex flex-r ali-i-c b-box"
						style="border-bottom: 2rpx solid #EEEEEE;padding: 34rpx 0;"
					>
						<view class="d-flex flex-c ali-i-s just-s " style="width: 164rpx;">
							<text
								class="pf-sc fw-400"
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 48rpx;"
							>
								身份证
							</text>
							<text
								class="pf-sc fw-400"
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 48rpx;"
							>
								正面
							</text>
						</view>
						<view @click="uploadimg(0)">
							<image
								v-if="scupcardimg"
								:src="'https://www.chejingjing.cn' + scupcardimg"
								mode="widthFix"
								style="width: 126rpx;height: 126rpx;"
							></image>
							<image
								:src="require('../static/add.png')"
								mode="widthFix"
								style="width: 126rpx;height: 126rpx;"
							></image>
						</view>
					</view>
					<view class="d-flex flex-r ali-i-c  b-box" style="padding: 34rpx 0;">
						<view class="d-flex flex-c ali-i-s just-s " style="width: 164rpx;">
							<text
								class="pf-sc fw-400"
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 48rpx;"
							>
								身份证
							</text>
							<text
								class="pf-sc fw-400"
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 48rpx;"
							>
								反面
							</text>
						</view>
						<view @click="uploadimg(1)">
							<image
								v-if="upcardimg"
								:src="'https://www.chejingjing.cn' + upcardimg"
								mode="widthFix"
								style="width: 126rpx;height: 126rpx"
							></image>

							<image
								:src="require('../static/add.png')"
								mode="widthFix"
								style="width: 126rpx;height: 126rpx;"
							></image>
						</view>
					</view>
				</view>
				<view class="logoht b-box" style="margin: 20rpx 0pt;">
					<checkbox-group @change="radioChange">
						<checkbox>已阅读并同意</checkbox>
						<text class="text-green" @click="ynsxie">《用户服务协议》</text>
						及
						<text class="text-green" @click="ynsxie">《隐私政策》</text>
					</checkbox-group>
				</view>
				<!-- 提交 -->
				<view class="w-750 b-box" style="padding: 0 40rpx;">
					<u-button
						:throttleTime="700"
						@click="Submit"
						:customStyle="{
							height: '88rpx',
							width: '670rpx',
							font: '500 32rpx PingFang SC',
							color: '#ffffff',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="提交"
					></u-button>
				</view>
			</view>
			<!-- 联系客服 -->
			<view
				class="w-750 b-box d-flex flex-r ali-i-c just-c po-ab"
				style="bottom: 88rpx;left: 0;right: 0;"
			>
				<view class="d-flex flex-r ali-i-c just-c" @click="Contact">
					<view style="width: 38rpx;height: 38rpx;margin-right:12rpx">
						<image :src="require('../static/kefu.png')" style="width: 38rpx;height: 38rpx;"></image>
					</view>
					<text class="pf-sc fw-400 " style="color: #999999;font-size: 30rpx;">联系客服</text>
				</view>
			</view>
		</view>
		<!-- 已提交 -->
		<view
			class="authentication-container w-750 b-box  bg-fa po-re"
			:style="{ height: containerHeight }"
			v-if="userinfo"
		>
			<!-- 已提交  待审核 -->
			<view
				v-if="userinfo.status == 4"
				class="w-750 b-box d-flex flex-c ali-i-c just-c"
				:style="{ height: parseInt(containerHeight) / 2.2 + 'px' }"
			>
				<view style="width:162rpx ;height:162rpx;margin-bottom: 36rpx;">
					<image
						:src="require('../static/success_pic.png')"
						style="width:162rpx ;height:162rpx;"
					></image>
				</view>
				<text class="c-333 pf-sc fw-400" style="font-size: 30rpx;">
					您的师傅认证申请已提交成功，
				</text>
				<text class="c-333 pf-sc fw-400" style="font-size: 30rpx;">请等待平台审核</text>
			</view>

			<!-- 审核中 -->
			<view
				class="w-750 b-box d-flex flex-c ali-i-c just-c"
				v-if="userinfo.status == 0"
				:style="{ height: parseInt(containerHeight) / 2.2 + 'px' }"
			>
				<view style="width:159rpx ;height:120rpx;margin-bottom: 38rpx;">
					<image
						:src="require('../static/shenhez.png')"
						style="width:159rpx ;height:120rpx;"
					></image>
				</view>
				<text class="c-333 pf-sc fw-400" style="font-size: 30rpx;">
					手机尾号{{ userinfo.mobile.slice(7) }}的师傅认证申请正在审核中，
				</text>
				<text class="c-333 pf-sc fw-400" style="font-size: 30rpx;">耐心等待一下吧~</text>
			</view>

			<!-- 审核通过 -->
			<view
				class="w-750 b-box d-flex flex-c ali-i-c just-c"
				v-if="userinfo.status == 1"
				:style="{ height: parseInt(containerHeight) / 2.2 + 'px' }"
			>
				<view style="width:127rpx ;height:132rpx;margin-bottom: 36rpx;">
					<image
						:src="require('../static/tongguo.png')"
						style="width:127rpx ;height:132rpx;"
					></image>
				</view>
				<view class="d-flex flex-c ali-i-c just-c w-750 b-box" style="margin-bottom: 46rpx;">
					<text class="c-333 pf-sc fw-400" style="font-size: 30rpx;">
						手机尾号{{ userinfo.mobile.slice(7) }}的师傅认证申请已通过，
					</text>
					<text class="c-333 pf-sc fw-400" style="font-size: 30rpx;">立即登录接单吧~</text>
					<view class=" pf-sc fw-400" style="font-size: 30rpx;color: #666666;margin-top: 20rpx;">
						您的账号：{{ userinfo.account }}，密码：123456
					</view>
				</view>

				<view class="w-750 b-box" style="padding: 0 40rpx;">
					<u-button
						:throttleTime="700"
						@click="GoLogOn"
						color="#26387C"
						plain
						:customStyle="{
							height: '74rpx',
							width: '240rpx',
							font: '400 28rpx PingFang SC',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="立即登录"
					></u-button>
				</view>
			</view>

			<view
				class="set-pwd-container w-750 b-box  bg-fa po-re"
				:style="{ height: containerHeight }"
				v-if="userinfo.status == 2"
			>
				<!-- 审核没有通过... -->
				<view
					class="w-750 b-box d-flex flex-c ali-i-c just-c"
					:style="{ height: parseInt(containerHeight) / 2.2 + 'px' }"
					style="margin: 0 auto;"
				>
					<view style="margin-bottom: 26rpx;margin: 0 auto;">
						<image
							:src="require('../static/fali.png')"
							style="width:191rpx ;height:196rpx;"
						></image>
					</view>
					<text class=" pf-sc fw-400" style="font-size: 30rpx;color: #666666;">
						您的师傅申请被驳回
					</text>
					<view class=" pf-sc fw-400" style="font-size: 30rpx;color: #666666;margin-top: 20rpx;">
						驳回原因：{{ userinfo.reason }}
					</view>
					<button
						@click="goShenQing"
						style="color: #26387C;width: 240rpx;height: 74rpx;border-radius: 37rpx;border: 2rpx solid #26387C;line-height: 74rpx;margin-top: 100rpx;font-size: 24rpx;"
					>
						重新申请
					</button>
				</view>
			</view>
		</view>

		<!-- 联系客服 -->
		<!-- <u-toast ref="uToast"></u-toast> -->
		<Contact-the-customer
			ref="customModel"
			:show="ModelShow"
			:top="'30rpx'"
			:confirmText="confirmText"
			:success="ModelStatus"
			:cancelText="cancelText"
			:height="height"
			:Cancelcolor="Cancelcolor"
			:color="color"
			:userName="userName"
			:showCloseIcon="showCloseIcon"
			@cancel="ModelCancel"
			@confirm="ModelConfirm"
			:title="ModelTitle"
		/>
	</view>
</template>

<script>
import ContactTheCustomer from '../components/Contact-the-customer/Contact-the-customer.vue';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Uinput from '../components/uview-ui/components/u-input/u-input';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
import { _containerHeight } from '@/utils/GetSys.js';
import { workerapply, kefu } from '@/common/api.js';
export default {
	components: {
		'u-navbar': Unavbar,
		'u-input': Uinput,
		'u-button': Ubutton
	},
	data() {
		return {
			userinfo: '',
			containerHeight: '',
			NoSubmit: true,
			requetParams: {
				userName: '',
				userMobile: ''
			},

			upcardimg: '',
			scupcardimg: '',
			radioChanges: 0,
			// 模态框
			ModelShow: false,
			ModelStatus: false, //客服
			ModelTitle: '',
			confirmText: '',
			cancelText: '',
			color: '',
			height: '',
			userName: '',
			showCloseIcon: '',
			Cancelcolor: '',
			phone:''
		};
	},
	methods: {
		ynsxie(){
			uni.navigateTo({
				url:'/staffModelA/staffB/userinfoadd/userinfoadd'
			})
		},
		Contact() {
			//联系客服
			kefu().then(res => {
				if (res.data.code === 1) {
					// 弹出客服联系电话模态框
					this.phone=res.data.data
					this.ModelStatus = false; //客服
					this.ModelTitle = '客服电话：'+res.data.data;
					this.confirmText = '拨打电话';
					this.cancelText = '取消';
					this.Cancelcolor = '#999999';
					this.color = '#FF5C00';
					this.height = '80rpx';
					this.userName = '';
					this.showCloseIcon = false;
					this.ModelShow = true;
				}
			});
		},
		ModelCancel() {
			//关闭模态框
			this.ModelShow = false;
		},
		ModelConfirm() {
			this.ModelShow = false;
			uni.makePhoneCall({
				phoneNumber: `${this.phone}`,
				complete(e) {
					console.log(e);
				}
			});
		},

		goShenQing() {
			this.userinfo = '';
			this.userinfo.status = '';
		},
		radioChange(e) {
			this.radioChanges = !this.radioChanges;
		},
		uploadimg(type) {
			uni.chooseImage({
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					const uploadTask = uni.uploadFile({
						url: 'https://www.chejingjing.cn/api/index/uploadimg',
						filePath: tempFilePaths[0],
						name: 'photo',
						formData: {
							photo: tempFilePaths[0]
						},
						success: res => {
							// console.log(JSON.parse(res.data));
							res = JSON.parse(res.data);
							if (res.code == 1) {
								if (type == 1) {
									this.upcardimg = res.data.url1;
								} else if (type == 0) {
									this.scupcardimg = res.data.url1;
								}
							}
						}
					});
				}
			});
		},
		getorderlists(type) {
			if (this.radioChanges == 0) {
				uni.showToast({
					icon: 'none',
					title: '请先允许用户隐私协议'
				});
				return;
			}
			if (this.requetParams.userName === '') {
				uni.showToast({
					title: '请输入您的姓名',
					icon: 'none'
				});
				return false;
			}
			if (this.requetParams.userMobile === '') {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
				return false;
			}
			let reg = /^1[3-8]\d{9}$/;
			if (!reg.test(this.requetParams.userMobile)) {
				uni.showToast({
					title: '请填写正确的手机号',
					icon: 'none'
				});
				return false;
			}
			if (this.scupcardimg == '') {
				uni.showToast({
					title: '请上传身份证正面照片',
					icon: 'none'
				});
				return false;
			}
			if (this.upcardimg == '') {
				uni.showToast({
					title: '请上传身份证反面照片',
					icon: 'none'
				});
				return false;
			}
			let params = {
				token: uni.getStorageSync('usertoken'),
				type: type,
				name: this.requetParams.userName,
				mobile: this.requetParams.userMobile,
				shopimage: this.scupcardimg,
				idoimages: this.upcardimg
			};
			workerapply(params).then(res => {
				if (res.data.code == 1) {
					uni.navigateTo({
						url: '/staffModelA/staffC/WorkerSuccess/WorkerSuccess'
					});
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/index/index'
						})
					}, 2000);
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		GoLogOn() {
			uni.redirectTo({
				url: `/staffModelA/staffB/LogOn/LogOn`
			});
		},
		ContactService() {},
		Submit() {
			this.getorderlists(2);
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		async afterRead(event) {
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		async afterRead2(event) {
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload',
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
		let params = {
			token: uni.getStorageSync('usertoken'),
			type: 1
		};
		workerapply(params).then(res => {
			console.log(res.data.data.mobile.slice(7));
			this.userinfo = res.data.data;
		});
	}
};
</script>

<style lang="scss">
.authentication {
	.authentication-container {
	}
}
</style>
